<template>
  <div class="home">
    <commonheader></commonheader>
    <el-container class="content">
      <common_menuVue></common_menuVue>
      <el-main>
        <el-card>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item
              v-for="(item, index) in $route.matched"
              :key="index"
              >{{ item.name }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-card>
        <div class="maincontent">
          <transition name="el-zoom-in-center">
            <router-view></router-view>
          </transition>
        </div>
        <commonfooter></commonfooter>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import commonheader from "@/components/common_header.vue";
import commonfooter from "@/components/common_footer.vue";
import common_menuVue from "@/components/common_menu.vue";
export default {
  components: {
    commonheader,
    commonfooter,
    common_menuVue,
  },
  name: "Home",
  data() {
    return {};
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.home {
  .content {
    position: absolute;
    width: 100%;
    top: 60px;
    bottom: 0;
    .maincontent {
      margin: 20px 0;
      .transition-box {
        margin-bottom: 10px;
        width: 200px;
        height: 100px;
        border-radius: 4px;
        background-color: #409eff;
        text-align: center;
        color: #fff;
        padding: 40px 20px;
        box-sizing: border-box;
        margin-right: 20px;
      }
    }
  }
}
</style>
